<!-- select动态赋值 -->
<template>
  <div>
    <el-select v-if="isuse" v-model="dynamicvalue" placeholder="请选择" @change="optionchange()">
      <template v-for="(item) in selectcontent">
        <el-option :key="item.value" :label="item.label" :value="item.value" />
      </template>
    </el-select>
    <!-- 以下用于展示 -->
    <el-select v-else v-model="value" :disabled="disabled" placeholder="请选择" @change="optionchange()">
      <template v-for="(item) in selectcontent">
        <el-option :key="item.value" :label="item.label" :value="item.value" />
      </template>
    </el-select>
  </div>

</template>

<script>
import { option } from '@/api/option.js'
export default {
  props: {
    labelcharacter: { // label信息的字段
      type: String,
      default: ''
    },
    valuecharacter: { // value信息的字段
      type: String,
      default: ''
    },
    dicurl: { // 返回option内容的地址
      type: String,
      default: ''
    },
    value: { // value信息的值
      type: String,
      default: ''
    },
    disabled: { // 这个select是否可以使用
      type: Boolean,
      default: true
    },
    isuse: { // 是只读的组件，还是可以使用的组件
      type: Boolean,
      default: true
    }

  },
  data() {
    return {
      dynamicvalue: '', // 可以使用select的时候  调用这个参数
      selectcontent: [] // 这个是一个动态变化的select值
    }
  },
  watch: {
    type(val) {
      console.log('val', val)
    }
  },
  created() {
    this.onSearch()
  },
  methods: {
    async onSearch(type) {
      const res = await option(this.dicurl)
      // console.log('组件收到', this.valuecharacter, this.labelcharacter)
      let optionarr = []
      if (res.code === '200') {
        optionarr = res.data
      }

      optionarr.forEach(element => {
        this.selectcontent.push({
          label: String(element[this.labelcharacter]),
          value: String(element[this.valuecharacter])
        })
      })
      //   console.log('ddddd', this.selectcontent)
    },
    optionchange() {
      this.$emit('optionchange', this.dynamicvalue)
    }

  }
}
</script>

<style scoped lang="scss">
/*form的宽度 设置成自适应宽度*/
.el-form-item {
  margin-right: 0 !important;
}
.el-form-item__label {
  position: absolute;
}
.el-form-item__content {
  width: 100%;
  padding-left: 80px;
}
.el-select,
.el-input_inner {
  width: 100%;
}
/*end*/
</style>

